<template lang="html">
  <div class="case-show-after">
    <go-back></go-back>
    <div class="after-detail">
      <dl v-for="item in detail">
        <dt>
          <!--<img src="http://picture.zgwyzxw.cn/picture/home/0251d9799e89943a37047ecf79361ee7.png" alt="">-->
          <div v-if="item.files">
             <img :src="_filterObj(item.files)" :lazy="lazyImage">
          </div>
          <div v-else>
             <img :src="imgUrl" alt="">
          </div>
        </dt>
        <dd>
          <h2>{{item.title}}</h2>
          <p v-html="$options.filters.deleteImgSting(item.content)">{{item.content}}</p>
        </dd>
      </dl>
    </div>
  </div>
</template>

<script>
// import List from 'components/index/list/list.vue'
import GoBack from 'components/index/goback/goback'
import {getGroupData} from 'api/article.js'
import {filterObj} from 'common/js/filterObj.js'
export default {
  components: {
    // List,
    GoBack
  },
  data() {
    return {
      total: 10,
      detail: [],
      lazyImage: require('./new.png'),
      imgUrl: require('./new.png')
    }
  },
  created() {
    let zone = this.$route.params.zone
    this._getGroupData(zone)
  },
  methods: {
    _getGroupData(tag) {
      getGroupData(tag).then((res) => {
        this.detail = res.data
        console.log(this.detail)
      })
    },
    _filterObj(obj) {
      return filterObj(obj)[0].url
    }
  }
}
</script>

<style lang="scss">
@import "~common/sass/mixin.scss";
.case-show-after{
  margin-bottom: 100px;
  .after-detail{
    width: 1200px;
    margin:40px auto 0;
    dl{
      display: flex;
      width: 100%;
      margin-top: 20px;
      dt{
        width: 70px;
        height: 70px;
        img{
          width: 70px;
          height: 70px;
        }
      }
      dd{
        flex-grow: 1;
        padding-left: 25px;
        h2{
          font-size: 22px;
          line-height: 22px;
          padding-bottom: 6px;
          padding-top: 10px;
        }
        p{
          font-size: 16px;
          line-height: 18px;
          @include ellipsis(2);
          margin-top: 10px;
        }
      }
    }
  }
  // h2{
  //   text-align: center;
  //   font-size: 30px;
  //   padding-top: 40px;
  // }
  // .content{
  //   width: 1200px;
  //   margin:0 auto;
  //   line-height: 30px;
  //   padding-top: 40px;
  //   text-indent: 30px;
  // }
}
</style>
